// variable
$cs-step-five-max-hundred-values: 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100; // 定义你想要的vh值，可以根据需要添加更多
$cs-step-one-max-ten-values: 0 1 2 3 4 5 6 7 8 9 10;
$cs-lr: "left" "right";
$cs-tb: "top" "bottom";
$cs-tblr: "top" "bottom" "left" "right";
$cs-spacer: "margin" "padding";

// color
.cs-background-color {
    background-color:$blue-500;
}
.cs-background-color-two {
    background-color:$orange-500;
}

.cs-font-white {
    color: $white;
}
.cs-font-white-hover {
    color: $green-100
}
.cs-font-white-active {
    color: $green-200
}
.cs-font-black {
    color: $black;
}
.cs-font-gray {
    color: $gray-500;
}
.cs-font-gray-2 {
    color: $gray-200;
}

// width height spacer
.cs-fill {
    height: 100%;
    width: 100%;
}
.cs-height-fill {
    height: 100%;
}
.cs-width-fill {
    width: 100%;
}

@each $value in $cs-step-five-max-hundred-values {
    .cs-width-#{$value}-#{$value} {
        width: #{100 - 2 * $value}vw;
  }
}

@each $value in $cs-step-five-max-hundred-values {
    .cs-height-vh-#{$value} {
        height: #{$value}vh;
    }
}

@each $value in $cs-spacer {
    @each $value1 in $cs-step-one-max-ten-values {
        @each $value2 in $cs-step-one-max-ten-values {
            @each $value3 in $cs-step-five-max-hundred-values {
                .cs-#{$value}-#{$value1}-#{$value2}-#{$value3} {
                    #{$value}: #{$value1 * $value3 * 0.1}rem #{$value2 * $value3 * 0.1}rem;
                }
            }
        }
    }
}

// layout
.cs-inline-block {
    display: inline-block;
}
.cs-flex {
    display: flex;
}
.cs-flex-inner-center {
    @extend .cs-flex;
    align-items: center;
}
.cs-flex-inner-center-center {
    @extend .cs-flex;
    align-items: center;
    justify-content: center;
}


// list
.cs-row-parent {
    @extend .cs-flex-inner-center;
    @extend .cs-margin-0-0-0;
    
    list-style: none;
    
    .cs-row-child {
        @extend .cs-padding-1-2-5;
    }
}

.cs-link {
    text-decoration: none;
    cursor: pointer;
    @extend .cs-font-white;
    
    &:hover {
        @extend .cs-font-white-hover;
    }
    &.cs-active {
        @extend .cs-font-white-active;
    }
}
